<template>
  <div>
    <el-timeline>
      <el-timeline-item
        v-for="(log,index) in items"
        :key="index"
        placement="top"
      >
        <el-card>
          <el-button
            v-if="index>1"
            style="float: right"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="remove(index)"
          >
          </el-button>
          <el-input
            v-if="index!==0"
            placeholder="请输入流程名称"
            v-model="log.taskNodeName"
            size="small"
            style="width: 200px"
          ></el-input>
          <h4 v-else>
            {{ log.taskNodeName }}
          </h4>
          <div style="margin-top: 20px">
            <el-link
              type="primary"
              @click="selectUserShow(index,index===0)"
            >
              {{ log.actionUserId?'修改':'设置' }}执行人
            </el-link>
            <!--            多个-->
            <template v-if="log.actionUsers && log.actionUsers.length">
              <el-tag
                v-for="(ii,iii) in log.actionUsers"
                :key="iii"
                style="margin-left: 10px"
                type="success"
                closable
                @close="mClose(index,iii)"
                size="small"
              >
                {{ ii.actionUserName }}
              </el-tag>
            </template>
            <el-tag
              v-if="log.actionUserId"
              style="margin-left: 10px"
              type="success"
              size="small"
            >
              {{ log.actionUserName }}
            </el-tag>
          </div>
          <!--          协作人员-->
          <div
            style="margin-top: 20px"
            v-if="index !==0 && log.actionUserId"
          >
            <el-link
              type="primary"
              @click="selectUserShow2(index)"
            >
              设置协作人
            </el-link>
            <!--            多个-->
            <template v-if="log.collaborator && log.collaborator.length">
              <el-tag
                v-for="(ii,iii) in log.collaborator"
                :key="iii"
                style="margin-left: 10px"
                type="danger"
                closable
                @close="mClose2(index,iii)"
                size="small"
              >
                {{ ii.name }}
              </el-tag>
            </template>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <SeleCtUsers
      v-if="userShow"
      :show="userShow"
      :mulit-mode="mulitMode"
      @close="userShow = false"
      @select="doSelect"
    />
    <SeleCtUsers
      v-if="userShow2"
      :show="userShow2"
      :mulit-mode="true"
      @close="userShow2 = false"
      @select="doSelect2"
    />
  </div>
</template>

<script>
  import SeleCtUsers from '@/component/base/SelectUsers'

  export default {
    name: 'DefaultFlow',
    components: {
      SeleCtUsers
    },
    model: {
      prop: 'items',
      event: 'change'
    },
    props: {
      items: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        userShow2: false, // 协作人
        userShow: false,
        mulitMode: false,
        currentIndex: 0 // 当前所选行
      }
    },
    methods: {
      remove (index) {
        const items = this.$_util.deepClone(this.items)
        items.splice(index, 1)
        this.$emit('change', items)
      },
      selectUserShow (index, mulitMode) {
        this.currentIndex = index
        this.userShow = true
        this.mulitMode = mulitMode
      },
      selectUserShow2 (index) {
        this.currentIndex = index
        this.userShow2 = true
      },
      // 标签关闭
      mClose (index1, index2) {
        const items = this.$_util.deepClone(this.items)
        items[index1].actionUsers.splice(index2, 1)
        this.$emit('change', items)
      },
      // 协作人标签关闭
      mClose2 (index1, index2) {
        const items = this.$_util.deepClone(this.items)
        items[index1].collaborator.splice(index2, 1)
        this.$emit('change', items)
      },
      doSelect (result) {
        const items = this.$_util.deepClone(this.items)
        if (Array.isArray(result)) {
          const users = result.map(item => {
            return { actionUserId: item.id, actionUserName: item.name }
          })
          const temp = [...items[this.currentIndex].actionUsers || [], ...users]
          const tempIds = Array.from(new Set(temp.map(item => item.actionUserId)))
          console.log(temp)
          console.log(tempIds)
          items[this.currentIndex].actionUsers = tempIds.map(id => {
            return temp.find(t => t.actionUserId === id)
          })
        } else {
          const { id, name } = result
          items[this.currentIndex].actionUserId = id
          items[this.currentIndex].actionUserName = name
        }
        this.userShow = false
        this.$emit('change', items)
      },
      doSelect2 (result) {
        const items = this.$_util.deepClone(this.items)
        // items[this.currentIndex].collaborator = result.filter(item => item.id !== items[this.currentIndex].actionUserId)
        items[this.currentIndex].collaborator = result
        this.userShow2 = false
        this.$emit('change', items)
      }
    }
  }
</script>

<style scoped>

</style>
